<style>
	.label-cell {
		width: 25%;
	}
	.content-cell {
		width: 75%;
	}
</style>

<div class="api-doc-component" [class.deprecated]="apiDocs().deprecated">
	<h3 [id]="apiDocs().className">
		<a
			routerLink="."
			[fragment]="apiDocs().className"
			class="title-fragment"
			title="Anchor link to: {{ apiDocs().className }}"
		>
			<i class="bi bi-link-45deg" style="font-size: 1.75rem; color: var(--bs-heading-color)"></i>
		</a>
		{{ apiDocs().className }}
		<a
			class="github-link"
			(click)="trackSourceClick()"
			href="https://github.com/ng-bootstrap/ng-bootstrap/tree/master/{{ apiDocs().fileName }}"
			target="_blank"
			title="Link to Github: {{ apiDocs().className }}"
		>
			<i class="bi bi-github" style="font-size: 1.5rem; color: var(--bs-heading-color)"></i>
		</a>
	</h3>
	<ngbd-api-docs-badge
		[type]="apiDocs().type"
		[deprecated]="apiDocs().deprecated"
		[since]="apiDocs().since"
	></ngbd-api-docs-badge>
	@if (apiDocs().deprecated) {
		<p>{{ apiDocs().deprecated?.description }}</p>
	}
	<p class="lead" [innerHTML]="apiDocs().description"></p>

	<section>
		<h4>
			Selector: <code class="selector">{{ apiDocs().selector }}</code>
		</h4>
		@if (apiDocs().exportAs) {
			<h6>
				Exported as: <code class="export-as">{{ apiDocs().exportAs }}</code>
			</h6>
		}
	</section>

	@if (apiDocs().inputs.length) {
		<section>
			<h4>Inputs</h4>
			<table class="table table-sm">
				<tbody>
					@for (input of apiDocs().inputs; track input) {
						<tr [class.deprecated]="input.deprecated">
							<td class="label-cell">
								<code>{{ input.name }}</code
								><br />
								@if (input.since) {
									<span class="badge bg-info text-dark">since {{ input.since.version }}</span>
								}
								&ngsp;
								@if (input.deprecated) {
									<span class="badge bg-secondary">deprecated {{ input.deprecated.version }}</span>
								}
							</td>
							<td class="content-cell">
								@if (input.deprecated) {
									<p>{{ input.deprecated.description }}</p>
								}
								<p class="description" [innerHTML]="input.description"></p>
								<div class="meta">
									<div>
										<i>Type: </i><code>{{ input.type }}</code>
									</div>
									@if (defaultInputValue(input) || hasConfigProperty(input)) {
										<div>
											<span
												><i>Default value: </i><code>{{ defaultInputValue(input) || '-' }}</code></span
											>&ngsp;
											@if (hasConfigProperty(input)) {
												<span>&mdash; initialized from {{ configServiceName() }} service</span>
											}
										</div>
									}
								</div>
							</td>
						</tr>
					}
				</tbody>
			</table>
		</section>
	}

	@if (apiDocs().outputs.length) {
		<section>
			<h4>Outputs</h4>
			<table class="table table-sm">
				<tbody>
					@for (output of apiDocs().outputs; track output) {
						<tr [class.deprecated]="output.deprecated">
							<td class="label-cell">
								<code>{{ output.name }}</code
								><br />
								@if (output.since) {
									<span class="badge bg-info text-dark">since {{ output.since.version }}</span>
								}
								&ngsp;
								@if (output.deprecated) {
									<span class="badge bg-secondary">deprecated {{ output.deprecated.version }}</span>
								}
							</td>
							<td class="content-cell">
								@if (output.deprecated) {
									<p>{{ output.deprecated.description }}</p>
								}
								<p class="description" [innerHTML]="output.description"></p>
							</td>
						</tr>
					}
				</tbody>
			</table>
		</section>
	}

	@if (apiDocs().methods.length && apiDocs().exportAs) {
		<section>
			<h4>Methods</h4>
			<table class="table table-sm">
				<tbody>
					@for (method of apiDocs().methods; track method) {
						<tr [class.deprecated]="method.deprecated">
							<td class="label-cell">
								<code>{{ method.name }}</code
								><br />
								@if (method.since) {
									<span class="badge bg-info text-dark">since {{ method.since.version }}</span>
								}
								&ngsp;
								@if (method.deprecated) {
									<span class="badge bg-secondary">deprecated {{ method.deprecated.version }}</span>
								}
							</td>
							<td class="content-cell">
								<p class="signature">
									<code>{{ methodSignature(method) }}</code
									>&ngsp;
									<small class="text-muted" title="Return type">=&gt; {{ method.returnType }}</small>
								</p>
								@if (method.deprecated) {
									<p>{{ method.deprecated.description }}</p>
								}
								<p class="description" [innerHTML]="method.description"></p>
							</td>
						</tr>
					}
				</tbody>
			</table>
		</section>
	}
</div>
